<template>
  <q-layout view="hHh Lpr lff">
    <q-header bordered>
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />

        <q-toolbar-title @click="$router.push('/')">
          <q-icon name="generating_tokens" size=32px></q-icon>
          学科竞赛服务平台
        </q-toolbar-title>
        <template v-if="isLogined">
          <q-btn unelevated round icon="add" @click="$router.push('/submit')"/>
          <q-btn unelevated round class="q-mr-md" icon="notifications" @click="$router.push('/msgbox')">
            <q-badge color="red" floating v-if="notifyNum">{{notifyNum}}</q-badge>
          </q-btn>
          <!-- 这里需要添加自定义头像 -->
          <y-auto-head-icon @click="this.$router.push('/me')" :imgBase="imgBase" :user="getUser"/>
        </template>
        <template v-else>
          <q-btn outline icon="account_circle" @click="$router.push('/login')" class="q-ml-sm" label="Login" />
        </template>
      </q-toolbar>
      <q-separator/>
    </q-header>

    <q-drawer
        v-model="leftDrawerOpen" side="left" overlay behavior="mobile" bordered
      >
        <q-list padding class="menu-list">

          <q-item clickable v-ripple @click="jumpPage('/')">
            <q-item-section avatar>
              <q-avatar color="teal" text-color="white" icon="home" />
            </q-item-section>

            <q-item-section>主页</q-item-section>
          </q-item>

          <!-- 现在我们要设计一个展示竞赛分类的页面，用折叠展示吧 -->
          <q-item clickable v-ripple @click="jumpPage('/cates')">
            <q-item-section avatar>
              <q-avatar color="teal" text-color="white" icon="lightbulb" />
            </q-item-section>

            <q-item-section>竞赛一览</q-item-section>
          </q-item>

          <q-item clickable v-ripple @click="jumpPage('/news')">
            <q-item-section avatar>
              <q-avatar color="teal" text-color="white" icon="trending_up" />
            </q-item-section>

            <q-item-section>竞赛动态</q-item-section>
          </q-item>

          <q-item clickable v-ripple @click="jumpPage('/find_people')">
            <q-item-section avatar>
              <q-avatar color="teal" text-color="white" icon="people" />
            </q-item-section>

            <q-item-section>找队友</q-item-section>
          </q-item>

          <q-item clickable v-ripple @click="getCompData()">
            <q-item-section avatar>
              <q-avatar color="teal" text-color="white" icon="download" />
            </q-item-section>

            <q-item-section>导出竞赛数据</q-item-section>
          </q-item>

        </q-list>
     </q-drawer>

    <q-page-container>
      <router-view />
      <q-page-sticky position="bottom-right" :offset="[18, 18]">
          <q-btn fab icon="arrow_back" color="blue" @click="$router.back()" />
      </q-page-sticky>
      <!-- 我们要根据当前竞赛是否需要我同意来展示“同意按钮” -->
    </q-page-container>
  </q-layout>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { mapGetters } from 'vuex'
import { Notify } from 'quasar'
import YAutoHeadIcon from 'src/components/y-auto-head-icon.vue'

export default defineComponent({
  name: 'MainLayout',

  components: {
    YAutoHeadIcon
  },
  async mounted () {
  },

  computed: {
    ...mapGetters('session', [
      'isLogined',
      'getUser'
    ]),
    ...mapGetters('comp', [
      'getCurInfo',
      'getMeAccept',
      'getOtherAccept'
    ]),
    notifyNum () {
      // 关键是这里如果发生变动就会出现异常
      const num = this.getMeAccept.length + this.getOtherAccept.length
      return num
    }
  },

  created () {
    this.initMsgBox()
  },
  watch: {
    isLogined: function (val, oldVal) {
      if (val) {
        this.initMsgBox()
      }
    }
  },

  methods: {
    jumpPage (url) {
      this.$router.push(url)
      this.toggleLeftDrawer()
    },
    toggleLeftDrawer () {
      this.leftDrawerOpen = !this.leftDrawerOpen
    },
    initMsgBox () {
      if (this.isLogined) {
        this.$store.dispatch('comp/getUnAcceptedCerts') // 这里需要我们重新设计
          .catch(error => {
            Notify.create('无法获取通知中心，请联系管理员：' + error + '：' + error.response.data.detail)
          })
      }
    },
    getCompData () {
      // 现在我们要请求API然后得到下载链接
      this.$axios.get('api/utils/get_xlsx')
        .then((response) => {
          window.open(response.data.url, '_blank')
        })
        .catch(error => {
          Notify.create({
            type: 'negative',
            message: '生成数据失败，原因：' + error + '：' + error.response.data
          })
        })
    }
  },

  setup () {
    return {
      leftDrawerOpen: ref(false),
      needMeAccept: ref(false)
    }
  }
})
</script>
